<template>
  <div class="wrapper">

    <i-tab-bar i-class='productTab' :current="current" @change="handleChange">
      <i-tab-bar-item key="detail" icon="activity" current-icon="activity_fill" title="产品概况">
      </i-tab-bar-item>
      <i-tab-bar-item key="manage" icon="computer" current-icon="computer_fill" title="设备管理">
      </i-tab-bar-item>
      <i-tab-bar-item key="rule" icon="warning" current-icon="warning_fill" title="规则管理"></i-tab-bar-item>
      <i-tab-bar-item key="datastream" icon="dynamic" current-icon="dynamic_fill" title="数据流管理"></i-tab-bar-item>
      <!-- <i-tab-bar-item key="key" icon="share" current-icon="share_fill" title="API Key管理"></i-tab-bar-item> -->
    </i-tab-bar>

    <div class="content">
      <ProductDetail v-if="current === 'detail'" :productID="sendID"></ProductDetail>
      <DeviceManage v-if="current === 'manage'" :productID="sendID"></DeviceManage>
      <RuleManage v-if="current === 'rule'" :productID="sendID"></RuleManage>
      <StreamManage v-if="current === 'datastream'" :productID="sendID"></StreamManage>
      <KeyManage v-if="current === 'key'" :productID="sendID"></KeyManage>
    </div>

    <i-message id="message" />
  </div>
</template>

<script>

import ProductDetail from '../components/ProductDetail'
import DeviceManage from '../components/DeviceManage'
import RuleManage from '../components/RuleManage'
import StreamManage from '../components/StreamManage'
import KeyManage from '../components/KeyManage'

import store from '../store/store'

export default {
  components: {
    ProductDetail, DeviceManage, RuleManage, StreamManage, KeyManage
  },

  data () {
    return {
      productID: 0,
      current: 'detail'
    }
  },
  onLoad (options) {
    this.productID = options.productID
  },
  mounted () {
  },
  methods: {
    handleChange (detail) {
      this.current = detail.target.key
    }
  },
  computed: {
    token () {
      return store.state.token
    },
    sendID () {
      return this.productID
    }
  }
}
</script>

<style>
.content {
  height: calc(100% - 100rpx);
}
.productTab {
  box-shadow: 0 1px 3px rgba(26,26,26,.1);
}
</style>
